<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }

        .one>div,
        .two>div {
            width: 98px;
            height: 98px;
            border: 1px solid #000;
            border-radius: 50%;
            background-color: red;
            float: left;
            text-align: center;
            line-height: 98px;
        }

        .two {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: absolute;
            left: 600px;
            top: 200px;
        }
    </style>
</head>

<body>
    <div class="one">
        <div draggable="true">1</div>
        <div draggable="true">2</div>
        <div draggable="true">3</div>
        <div draggable="true">4</div>
        <div draggable="true">5</div>
        <div draggable="true">6</div>
        <div draggable="true">7</div>
        <div draggable="true">8</div>
    </div>
    <div class="two"></div>

    <script>
        var boxs = document.querySelectorAll('.one div');
        //        临时的盒子 用于存放当前拖拽的元素

        var two = document.querySelector('.two');

        var temp = null;
        //         给8个小盒子分别绑定拖拽事件
        for (var i = 0; i < boxs.length; i++) {
            boxs[i].ondragstart = function () {
                //                保持当前拖拽的元素
                temp = this;
                console.log(temp);
            }

            boxs[i].ondragend = function () {
                //               当拖拽结束 ，清空temp
                temp = null;
                console.log(temp);
            }
        }

        //        目标元素的拖拽事件
        two.ondragover = function (e) {
            //            阻止拖拽的默认行为
            e.preventDefault();
        }
        //        当在目标元素上松开鼠标是触发
        two.ondrop = function () {
            //            将拖拽的元素追加到 two里面来
            this.appendChild(temp);
        }

        //=======================================================================
        /*navigator 导航*/
        //geolocation: 地理定位
        //        window.navigator.geolocation
        //        兼容处理
        if (navigator.geolocation) {
            //       如果支持，获取用户地理信息

            //            successCallback 当获取用户位置成功的回调函数
            //            errorCallback 当获取用户位置失败的回调函数

            navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

        } else {
            console.log('sorry,你的浏览器不支持地理定位');
        }
        // 获取地理位置成功的回调函数
        function successCallback(position) {
            //            获取用户当前的经纬度
            //            coords坐标
            //            纬度latitude
            var wd = position.coords.latitude;
            //            经度longitude
            var jd = position.coords.longitude;

            console.log("获取用户位置成功！");
            console.log(wd + '----------------' + jd);
            //          40.05867366972477----------------116.33668634275229

            //            谷歌地图：40.0601398850,116.3434224706
            //            百度地图：40.0658210000,116.3500430000
            //            腾讯高德：40.0601486487,116.3434373643
        }
        // 获取地理位置失败的回调函数
        function errorCallback(error) {
            console.log(error);
            console.log('获取用户位置失败！')
        }
    </script>
</body>

</html>